<template>
  <el-dialog v-model="visible" :title="'编辑流程'" :close-on-click-modal="false" style="width: 30%;" align-center>
    
   
    <template #footer>
      <span class="dialog-footer">
        <el-button type="danger" @click="removeNode">删除节点</el-button>

        <el-popover placement="right" :width="400" trigger="click">
          <template #reference>
            <el-button type="primary">新增节点</el-button>
          </template>
          <el-table :data="moduleList">
            <el-table-column property="label" label="节点名称" />
            
            <el-table-column  label="操作" >
              <template #default="scope">
                <vue-button :button-link=true @emit-event="addNode(scope.$index)" button-text="添加"></vue-button>
				      </template>
            </el-table-column>
          </el-table>
         </el-popover>
        
      </span>
    </template>
  </el-dialog>
   
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import {
    Delete,
    Plus
    
} from '@element-plus/icons-vue'

import { ElMessage, ElMessageBox } from 'element-plus'

  const visible = ref(false)
  
  let moduleList = ref([])
  let selectModule = ref([])
  const nodeIndex = ref(-1)

  const init = (index:number,selectItem:any,itemList:any) => {
	  visible.value = true
    nodeIndex.value = index
    selectModule = selectItem
    moduleList = itemList
 }


 const removeNode = () =>{
  ElMessageBox.confirm('确定进行删除操作?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		})
		.then(() => {
        selectModule.value.splice(nodeIndex.value,1)
        visible.value = false
			}
    )
		.catch(() => {})
 }

 

 const addNode = (index:any) => {
    const node = moduleList.value.slice(index,index+1)

    const perArr = selectModule.value.slice(0,nodeIndex.value+1)
    const lastArr = selectModule.value.slice(nodeIndex.value+1);
    selectModule.value = []
    selectModule.value.push(...perArr)
    selectModule.value.push(...node)
    selectModule.value.push(...lastArr)
 }

 defineExpose({
	init
})

  </script>
  <style scoped>
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
  
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}

  </style>
  